// 退货四步
<template>
  <div class="ReturnState">
    <nav-login></nav-login>
    <div class="w1200">
      <div class="logo">
        <img @click="jumphome" src="@/assets/logo/logo1.jpg" alt>
      </div>
      <p class="logo_bottom">
        <span>
          <!-- 我的孚地 > 已经买到的商品 -->
        </span>
        <span>客服热线：{{this.$store.state.contact_info.complaint_call}}</span>
      </p>
      <div class="stepsTitle">
        <img v-if="step1" src="@/assets/images/step1.png" alt>
        <img v-if="step2" src="@/assets/images/step2.png" alt>
        <img v-if="step3" src="@/assets/images/step3.png" alt>
        <img v-if="step4" src="@/assets/images/step4.png" alt>
      </div>
      <div class="stepscontent">
        <!-- 步骤1 开始 -->
        <div class="stepOne" v-if="step1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="退款原因：" prop="ReasonsForRefunds">
              <el-select v-model="ruleForm.ReasonsForRefunds.name" placeholder="请选择退款原因">
                <el-option
                  v-for=" item in ruleForm.ReasonsForRefunds "
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="退款金额：" prop="RefundAmount">
              <el-input v-model="ruleForm.RefundAmount" disabled>{</el-input>
            </el-form-item>

            <el-form-item label="退款说明：" prop="Refunds">
              <el-input type="textarea" v-model="ruleForm.Refunds"></el-input>
            </el-form-item>

            <el-form-item label="上传凭证：" prop="UploadVoucher">
              <el-upload
                action
                :auto-upload="false"
                list-type="picture-card"
                ref="upload1"
                :limit="3"
                :on-progress="base64"
                :on-exceed="onExceed"
                accept="image/jpeg, image/jpg, image/png"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt>
              </el-dialog>

              <p style="font-size：12px;color:#9d9d9d">最多为3张</p>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 步骤1 结束 -->
        <!-- 步骤2 开始 -->
        <div class="stepTwo" v-if="step2">
          <div class="topTitle">
            <h3>请等待处理</h3>
            <!-- <img src="@/assets/icon/CountDown.png">
            <span>还剩3天0时0分</span> -->
          </div>
          <p class="des">您已成功发起退款申请，请耐心等待孚地卖场工作人员处理</p>
          <ul class="content">
            <li>
              <i></i>
              <span>孚地卖场同意后，请您按照平台给出的退货地址退货，并请记录退货运单号；</span>
            </li>
            <li>
              <i></i>
              <span>如孚地卖场拒绝，您可以修改申请后再次发起，孚地卖场会重新处理；</span>
            </li>
            <li>
              <i></i>
              <span>如果孚地卖场超时未处理您的退货申请，您可以联系孚地卖场售后客服：****，若协商后，孚地卖场同意您退货，您可以再次发起退货申请，并按照平台给出的退货地址退货。</span>
            </li>
          </ul>
          <p>
            您还可以
            <el-button type="text" @click="revoke">撤销申请</el-button>
          </p>
        </div>
        <!-- 步骤2 结束 -->
        <!-- 步骤3 开始 -->
        <div class="stepThree" v-if="step3">
          <div class="topTitle">
            <h3>请退货并填写物流信息</h3>
            <!-- <img src="@/assets/icon/CountDown.png"> -->
            <!-- <span>还剩3天0时0分</span> -->
          </div>
          <h4>1、请退货</h4>
          <p>未经孚地卖场同意，请您不要使用到付或平邮</p>
          <p>退货地址：吉林省长春市高新开发区平新路325号（收件人：于海涛 400-900-1339）</p>
          <h4>2、请填写退货物流信息</h4>
          <p>（逾期未填写，退货申请将关闭）</p>
          <el-form
            :model="ruleForm3"
            :rules="rules3"
            status-icon
            ref="ruleForm3"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="物流公司：" prop="LogisticsCompany">
              <el-select
                v-model="ruleForm3.LogisticsCompany.name"
                :placeholder="placeholder3"
                :disabled="threeDisabled"
              >
                <el-option
                  v-for=" item in ruleForm3.LogisticsCompany "
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="运单号码：" prop="WaybillNumber">
              <el-input
                v-model="ruleForm3.WaybillNumber"
                onchange="value=value.replace(/[^\d]/g,'')"
                :disabled="threeDisabled"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm3('ruleForm3')"
                :disabled="disabled1"
              >提交退货信息</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 步骤3 结束 -->
        <!-- 步骤4 开始 -->
        <div class="stepFour" v-if="step4">
          <div class="topTitle">
            <img src="@/assets/icon/CountDown.png">
            <h3>退款已完成</h3>
          </div>
          <ul class="content">
            <li>
              <i></i>
              <span>1、退货服务已完成，退款将原路退回到支付账户，部分银行需15-30个工作日到账。</span>
            </li>
            <li>
              <i></i>
              <span>2、退货服务已完成，已将退款发往微信钱包，退款结果请在微信钱包查询。</span>
            </li>
            <li>
              <i></i>
              <span>3、退货服务已完成，已将退款发往支付宝账户，退款结果请在支付宝个人账户查询。</span>
            </li>
          </ul>
        </div>

        <!-- 步骤4 结束 -->
        <div class="PublicRight">
          <div class="w256">
            <div class="title">退款详情</div>
            <div class="goodsImg">
              <img :src="goods.goods_logo">
              <div>
                <p>{{goods.goods_title}}</p>
              </div>
            </div>
            <ul>
              <li>订单编号：{{order_no}}</li>
              <li>创建时间：{{this.$store.state.ReturnedGoods.create_at}}</li>
              <li>单 价：￥{{goods.selling_price}}</li>
            </ul>
            <ol v-if="!step1">
              <li>退款编号：{{this.$store.state.ReturnNumber.refund_no}}</li>
              <!-- <li>退款金额：￥{{ruleForm.RefundAmount}}</li> -->
              <li>退款金额：￥{{this.$store.state.ReturnNumber.refund_price}}</li>
              <li>原 因：{{this.$store.state.ReturnNumber.refund_reason}}</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <home-footer></home-footer>
  </div>
</template>
<script>
export default {
  name: "ReturnState",
  data() {
    return {
      threeDisabled: false, //第三步驟的输入框能否输入
      disabled1: false, // 提交退货信息按钮是否可以点击
      goods: '',
      order_no: '',
      step1: false,
      step2: false,
      step3: false,
      step4: false,
      dialogVisible: false, // 上传图片的
      dialogImageUrl: "", // 上传图片的
      dialogImageUrlAddress: [], // base64图片地址
      disabled: false, // 按钮点击
      ruleForm: {
        ReasonsForRefunds: [], // 退款原因
        RefundAmount: (this.$store.state.ReturnedGoods.goods.selling_price * this.$store.state.returnGoodsNum).toFixed(2), // 退款金额
        Refunds: "", // 退款说明
        UploadVoucher: [] // 上传凭证
      },
      rules: {
        ReasonsForRefunds: [
          { required: true, message: "请选择退款原因", trigger: "change" }
        ]
      },

      placeholder3: '请选择物流公司',
      ruleForm3: {
        LogisticsCompany: [], // 物流公司
        WaybillNumber: "", // 运单号码
      },
      rules3: {
        LogisticsCompany: [
          { required: true, message: "请选择物流公司", trigger: "change" }
        ],
        WaybillNumber: [
          { required: true, message: "请填写运单号码", trigger: "blur" }
        ]
      }
    }
  },

  methods: {
    // 步骤显示    
    steping() {
      let n = this.$store.state.stepshow
      console.log(n)
      if (n == 0) {
        this.step1 = true
        this.step2 = false
        this.step3 = false
        this.step4 = false
      } else if ([1, 3].includes(n)) {
        this.step1 = false
        this.step2 = true
        this.step3 = false
        this.step4 = false
      } else if ([2, 4, 5, 6].includes(n)) {
        this.step1 = false
        this.step2 = false
        this.step3 = true
        this.step4 = false
        if (n >= 4) {
          this.threeDisabled = true
          this.getReturnInformation()
        }
      } else {
        this.step1 = false
        this.step2 = false
        this.step3 = false
        this.step4 = true
      }
    },

    // 第三步骤的input的显示情况以及slect的显示情况
    async getReturnInformation() {
      this.disabled1 = true
      this.threeDisabled = true
      let refund_no = this.$store.state.ReturnNumber.refund_no
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/getRefundLogistics',
        data: {
          refund_no
        }
      })
      if (res.data.State.Code == 200) {
        this.placeholder3 = res.data.data.refund_express_company
        this.ruleForm3.WaybillNumber = res.data.data.refund_express_no
      }
    },
    jumphome() {
      this.$router.push("/")
    },

    // 图片格式转换方法
    base64() {
      let myarr = []
      const urls = document.getElementsByClassName('el-upload-list__item-thumbnail')
      for (let i = 0; i < urls.length; i++) {
        myarr.push(this.imgbase64(urls[i].src))
      }
      this.dialogImageUrlAddress = myarr
    },

    // 删除上传的图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    // 图片预览营业执照
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 图片超过限定数量的钩子函数
    onExceed(files, fileList) {
      this.$message({
        message: "温馨提示:上传图片最多为三张 请勿重复点击...",
        type: "warning"
      })
    },

    // 提交表单的按钮  第一步
    async submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.base64()
          this.disabled = true
          let refund_type = 2   //退换货方式 1仅退款 2退货退款 3换货
          let id = this.$store.state.ReturnedGoods.goods.id
          let refund_status = this.ruleForm.ReasonsForRefunds.name   // 退款原因
          let refund_description = this.ruleForm.Refunds   // 退款说明 
          let param = this.dialogImageUrlAddress   // 凭证
          let refund_price = this.ruleForm.RefundAmount  // 金额
          let refund_num = this.$store.state.returnGoodsNum  // 退货数量

          this.$http({
            method: 'post',
            url: '/api/index/api/refundApplication',
            data: {
              refund_type,
              id,
              refund_status,
              refund_description,
              param,    
              refund_price,
              refund_num
            }
          }).then(res => {
            console.log(res)
            this.getStep()
          }).catch(err => {

          })

        } else {
          return false
        }
      })
    },

    // 撤销申请
    async revoke() {
      let id = this.$store.state.ReturnedGoods.goods.id
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/cancelRefundApplication',
        data: {
          id
        }
      })
      if (res.data.State.Code == 200) {
        // this.$router.push("/myOrder")
        this.$router.push({
          name: "FullOrder",
        })

        this.$store.commit("leftIndex", 1);
        this.getStep()
      }
    },

    // 第三步骤 表单提交
    async submitForm3(formName) {

      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.disabled = true
          let id = this.$store.state.ReturnedGoods.goods.id
          let refund_express_company_id = this.ruleForm3.LogisticsCompany.name     // 快递公司id
          let refund_express_no = this.ruleForm3.WaybillNumber  // 快递单号
          this.$http({
            method: 'post',
            url: '/api/index/api/backTrack',
            data: {
              id,
              refund_express_company_id,
              refund_express_no
            }
          }).then(res => {
            if (res.data.State.Code == 200) {
              this.$notify({
                title: '成功',
                message: '请您耐心等待商家的审核...',
                type: 'success'
              })
              this.getStep()
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          return false
        }
      })


    },

    dataInfo() {
      this.goods = this.$store.state.ReturnedGoods.goods
      this.order_no = this.$store.state.ReturnedGoods.order_no
      console.log(this.$store.state.ReturnedGoods)
    },

    // 获取退款原因
    async getInfo() {
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/reasonForReturn'
      })
      if (res.data.State.Code == 200) {
        this.ruleForm.ReasonsForRefunds = res.data.data
      }
      console.log(res)
    },

    // 获取物流公司
    async logisticsInfo() {
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/expressCompany'
      })
      console.log(res)
      if (res.data.State.Code == 200) {
        this.ruleForm3.LogisticsCompany = res.data.data
      }
    },

    // 获取显示步骤
    async getStep() {
      let id = this.$store.state.ReturnedGoods.goods.id
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/verification',
        data: {
          id
        }
      })
      if (res.data.State.Code == 200) {
        let page = res.data.data
        this.$store.commit("changeStep", page)
        this.steping()
      }
    }
  },

  created() {
    this.steping()
  },

  mounted() {
    this.dataInfo()
    this.getInfo()
    this.logisticsInfo()
  }
  
}
</script>
<style lang="scss" scoped>
.ReturnState {
  width: 100%;
  .w1200 {
    width: 1200px;
    margin: auto;
    .logo {
      img {
        cursor: pointer;
      }
    }
    .logo_bottom {
      color: #5b5b5b;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 14px;
      span {
        &:last-child {
          font-size: 12px;
          color: #8c8c8c;
        }
      }
    }
    .stepsTitle {
      img {
        width: 1200px;
        height: 41px;
      }
    }
    .stepscontent {
      margin-top: 10px;
      margin-bottom: 60px;
      width: 100%;
      border: 1px solid #dfdfdf;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      .stepOne {
        flex: 1;
        margin: 40px 150px 40px 74px;
        .el-form {
          /deep/ .el-form-item {
            p {
              font-size: 12px;
              color: #909090;
            }
            &:nth-child(3) {
              width: 45.5%;
            }
          }
        }
      }
      .stepTwo {
        flex: 1;
        margin: 33px;
        .topTitle {
          display: flex;
          flex-direction: row;
          align-items: center;
          img {
            padding-left: 66px;
            padding-right: 8px;
          }
          span {
            color: #1495ff;
          }
        }
        .des {
          line-height: 40px;
          margin-bottom: 10px;
        }
        .content {
          width: 100%;
          padding-top: 30px;
          border-top: 1px solid #e2e2e2;
          li {
            display: flex;
            flex-direction: row;
            i {
              width: 4px;
              height: 4px;
              margin-right: 5px;
              margin-top: 8px;
              border-radius: 50%;
              background: #c8c8c8;
            }
          }
        }
        .el-button {
          margin: 20px 0px;
        }
      }
      .stepThree {
        flex: 1;
        margin: 33px;
        .topTitle {
          display: flex;
          flex-direction: row;
          align-items: center;
          img {
            padding-left: 66px;
            padding-right: 8px;
          }
          span {
            color: #1495ff;
          }
        }
        h4 {
          line-height: 40px;
          font-size: 14px;
        }
        p {
          color: #777777;
          font-size: 14px;
        }
        .el-form {
          /deep/ .el-form-item {
            &:nth-child(2) {
              width: 37.2%;
            }
          }
        }
      }
      .stepFour {
        flex: 1;
        margin: 33px;
        .topTitle {
          display: flex;
          flex-direction: row;
          align-items: center;
          img {
            // padding-left: 25px;
            padding-right: 8px;
          }
          span {
            color: #1495ff;
          }
        }
        .content {
          width: 100%;
          padding-top: 30px;
          li {
            display: flex;
            flex-direction: row;
            i {
              width: 4px;
              height: 4px;
              margin-right: 5px;
              margin-top: 8px;
              border-radius: 50%;
              background: #c8c8c8;
            }
          }
        }
      }
      .PublicRight {
        width: 280px;
        border-left: 1px solid #dfdfdf;
        .w256 {
          width: 256px;
          margin: auto;
          .title {
            color: #454545;
            font-size: 16px;
            border-bottom: 1px solid #dfdfdf;
            line-height: 50px;
            margin-top: 10px;
          }
          .goodsImg {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 15px 10px;
            font-size: 12px;
            color: #8d8d8d;
            // border-bottom: 1px solid #dfdfdf;
            img {
              width: 84px;
              height: 84px;
              border: 1px solid #dfdfdf;
              margin-right: 5px;
            }
            span {
              display: block;
            }
            div {
              p {
                width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          ul,
          ol {
            border-top: 1px solid #dfdfdf;
            padding: 15px 5px;
            li {
              color: #6a6a6a;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>

